<template>
  <div>
    <basic-container-one>
    <div class="playbox">
      <div class="playboxtitle">
        <div>
          <span>注意事项：</span>
        </div>
        <div>
          <span>1. 玩家账号需要有创建角色的才能进行换绑；如果未创建角色，请等待玩家创角后再操作。</span>
        </div>
        <div>
          <span>2. 玩家账号必须归属于您以及您的下级推广账号才能换绑。</span>
        </div>
        <div>
          <span>3. 玩家换绑换后更新数据需要一定时间，可点击【换绑记录】中查看操作执行的结果，玩家换绑为不可逆操作，请谨慎操作。</span>
        </div>
      </div>
    </div>
    <el-row style="margin-top: 20px">
      <el-col>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="formInline.account" clearable placeholder="玩家账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formInline.oldPromoterName" clearable placeholder="原归属账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formInline.newPromoterName" clearable placeholder="新归属账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="time"
              clearable
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    </basic-container-one>
    <basic-container>
    <el-row>
      <el-col :span="24">
        <template>
          <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
            <el-table-column
              prop="account"
              label="玩家账号">
              <template slot-scope="scope">
                <span v-if="scope.row.phone!=''"><span
                  class="skucost-pruice">{{ scope.row.phone}}</span></span>
                <span v-else><span
                  class="skucost-pruice">{{ scope.row.account}}</span></span>
              </template>
            </el-table-column>

            <el-table-column
              prop="oldPromoterName"
              label="原归属账号">
            </el-table-column>
            <el-table-column
              prop="newPromoterName"
              label="新归属账号">
            </el-table-column>
            <el-table-column
              prop="time"
              label="指定订单时间">
              <template slot-scope="scope">
                <span v-if="scope.row.time!=''"><span
                  class="skucost-pruice">{{ scope.row.time  | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="money"
              label="操作换绑金额">
              <template slot-scope="scope">
                <span v-if="scope.row.money!=''"><span
                  class="skucost-pruice">{{ (Number(scope.row.money)/100).toFixed(2) }}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createUserName"
              label="操作账号">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="操作时间">
            </el-table-column>
            <el-table-column
              prop="address"
              label="处理状态">
              <template slot-scope="scope">
                <span ><span
                  class="skucost-pruice">处理成功</span></span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10,20, 50, 100, 200]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </el-col>
    </el-row>

  </basic-container>
  </div>
</template>

<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
}
</style>


<script>


import { recordPage} from "@/api/system/details";

export default {
  data() {
    return {
      leading:true,
      tableData: [],
      formInline: {
        account: '',
        oldPromoterName:'',
        newPromoterName:'',
      },
      time:null,
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }

  },

  computed: {},
  created() {
    this.onload();
  },
  methods: {


      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page.pageSize = val;
        this.onSubmit();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page.currentPage = val;
        this.onSubmit();
      },
      isNotEmpty(arr) {
        return arr != null && arr.length !== 0
      },
      isEmpty(arr) {
        return !this.isNotEmpty(arr)
      },
      onSubmit() {
        var startTime = undefined;
        var endTime = undefined;
        console.log('this.time', this.time)
        if (this.isNotEmpty(this.time)) {
          startTime = this.time[0].getTime()
          endTime = this.time[1].getTime()
        }
        this.onload(startTime, endTime);
      },

      onload(startTime, endTime) {
        this.loading = true;
        recordPage(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline), startTime, endTime).then(res => {
          const data = res.data.data;
          console.log("res.data.data", res.data.data)
          this.page.total = data.total;
          this.tableData = data.records;
          this.loading = false;
        });
      },
    }
}
</script>

<style>
.playbox{
  width: 100%;
  background-color: #F4F4F5;
}
.playboxtitle{
  padding: 10px 18px;
  font-size: 13px;
  line-height: 18px;
  color: #909399;
}

</style>

